<template>
  <div id="main">
    <el-card class="add-box-card" :body-style="{height:'calc(100% - 76px)',overflow:'auto',display:'flex'}">
      <div slot="header" class="box-card-title">
        <span>添加巡检人员信息</span>
      </div>
      <el-form :model="addMemberFormData" class="edit-form less-margin-form" label-width="100px" label-position="right"    :rules="rules" ref="ruleForm" >
        <el-form-item label="姓　　名：" prop="name">
          <el-input class="add-input" v-model="addMemberFormData.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
          <el-form-item label="工　　号："  prop="account">
          <el-input class="add-input" v-model="addMemberFormData.account" placeholder="请输入工号"></el-input>
        </el-form-item>
       
        <el-form-item label="年　　龄：" :label-width="formLabelWidth">
          <el-input class="add-input" v-model="addMemberFormData.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="居住地址：">
          <el-input class="add-input" v-model="addMemberFormData.address" placeholder="请输入居住地址"></el-input>
        </el-form-item>
        <el-form-item label="目前岗位：">
          <el-input class="add-input" v-model="addMemberFormData.job" placeholder="请输入岗位名称"></el-input>
        </el-form-item>
       <el-form-item label="联系电话："  prop="tel">
          <el-input class="add-input" v-model="addMemberFormData.tel" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="设置密码：" prop="password">
          <el-input type="password" class="add-input" v-model="addMemberFormData.password" placeholder="请设置密码"></el-input>
        </el-form-item>
      </el-form>
      <!--<el-form :model="addMemberFormData2" class="edit-form less-margin-form" label-width="100px" label-position="left">
        <el-form-item label="姓名：">
          <el-input class="add-input" v-model="addMemberFormData2.name" placeholder="输入线路名称"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input class="add-input" v-model="addMemberFormData2.tel" placeholder="输入线路名称"></el-input>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input class="add-input" v-model="addMemberFormData2.age" placeholder="输入线路名称"></el-input>
        </el-form-item>
        <el-form-item label="居住地址：">
          <el-input class="add-input" v-model="addMemberFormData2.address" placeholder="输入线路名称"></el-input>
        </el-form-item>
        <el-form-item label="目前岗位：">
          <el-input class="add-input" v-model="addMemberFormData2.job" placeholder="输入线路名称"></el-input>
        </el-form-item>
        <el-form-item label="设置账号：">
          <el-input class="add-input" v-model="addMemberFormData2.account" placeholder="输入线路名称"></el-input>
        </el-form-item>
        <el-form-item label="设置密码：">
          <el-input class="add-input" v-model="addMemberFormData2.password" placeholder="输入线路名称"></el-input>
        </el-form-item>
      </el-form>-->
    </el-card>

    <div class="footer">
      <el-button class="greenButton" type="primary" @click="goSubmit('ruleForm')">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      addMemberFormData: {
        name: "",
        tel: "",
        age: "",
        address: "",
        job: "",
        account: "",
        password: ""
      },
      rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
          account: [
            { required: true, message: '请输入工号', trigger: 'blur' },
          ],
          tel: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请设置密码', trigger: 'blur' },
          ],
      },
      addMemberFormData2: {
        name: "",
        tel: "",
        age: "",
        address: "",
        job: "",
        account: "",
        password: ""
      },
    };
  },
  created(){
  },
  methods: {
    goSubmit: function (formName) {
      this.$confirm('确认添加新用户？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var formData = this.addMemberFormData;
             var data = {
               u_name: formData.name,
               u_tel: formData.tel,
               u_age: formData.age,
               u_address: formData.address,
               u_post: formData.job,
               u_account: formData.account,
               u_pass: formData.password
             };
             console.log(data);
             this.ajaxCommon.ajax({
               url: 'numberAdd',
               data: data,
               success: (res)=>{
                 if(res.code==200){
                   this.addMemberFormData={
                     name: "",
                     tel: "",
                     age: "",
                     address: "",
                     job: "",
                     account: "",
                     password: ""
                   };
                   this.ajaxCommon.notice('添加成功');
                 } else {
                   this.ajaxCommon.notice(res.status,3);
                 }
               }
        });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        // var formData = this.addMemberFormData;
        // var data = {
        //   u_name: formData.name,
        //   u_tel: formData.tel,
        //   u_age: formData.age,
        //   u_address: formData.address,
        //   u_post: formData.job,
        //   u_account: formData.account,
        //   u_pass: formData.password
        // };
        // console.log(data);
        // this.ajaxCommon.ajax({
        //   url: 'numberAdd',
        //   data: data,
        //   success: (res)=>{
        //     if(res.code==200){
        //       this.addMemberFormData={
        //         name: "",
        //         tel: "",
        //         age: "",
        //         address: "",
        //         job: "",
        //         account: "",
        //         password: ""
        //       };
        //       this.ajaxCommon.notice('添加成功');
        //     } else {
        //       this.ajaxCommon.notice(res.status,3);
        //     }
        //   }
        // });
      }).catch(() => {
        /*this.$message({
          type: 'info',
          message: '已取消删除'
        });*/
      });
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  .add-box-card {
    border: 1px solid #00bdac;
    box-shadow: 0px 4px 16px 0px rgba(0, 201, 212, 0.14);
    height: 480px;
    .box-card-title {
      background-color: #00bdac; 
      height: 36px;
      line-height: 36px;
      padding-left: 30px;
      font-size: 14px;
      color: #ffffff;
    }

    .edit-form {
      width: 50%;

      .add-green-text {
        display: inline-flex;
        color: #00bdac;
        width: 140px;
        justify-content: space-between;
        align-items: center;
        vertical-align: bottom;
        margin-left: 14px;
        cursor: pointer;

        img {
          width: 22px;
          height: 22px;
        }
      }
    }
  }

  .add-input {
    width: 260px;
  }

  .add-sign-input {
    width: 180px;
  }

  .footer {
    width: 100%;
    text-align: right;
    margin-top: 20px;
  }
}
</style>

<style lang="less">
.add-box-card {
  .el-card__header {
    padding: 0;
  }
}

.less-margin-form{
  .el-form-item{
    margin-bottom: 18px;
  }
}
</style>
